<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 空隙原理：  图片默认是基线对齐 */
        /* 方法1： 用除了basesline（基线）外的其他对齐方式都可以去除空隙 */
        /* 方法2： 用display:block；转换为块级元素 （注意：转换为块级元素会出现独占一行的情况） */
        div {
            border: 2px solid brown;
        }
        img {
                /* 去除边框底部与图片之间的空隙 */
                /* 用除了basesline（基线）外的其他对齐方式都可以去除空隙 */
                /* 如：top(顶端对齐)、middle(中部对齐)、bottom(底部对齐) 都可以*/
                vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/tb-promo.jpg" alt="">
    </div>
</body>
</html>